<template>
  <div>
    <Header></Header>
    <div class="wrapper">
      <div class="banner_bg">
        <img class="" :src="require('@/assets/front-img/hall_banner.png')" alt="">
      </div>
      <div class="section">
        <div class="banner_title">供需大厅</div>
        <div class="supply_content">
					<div class="supply_hall">
						<div class="type_bg">
							<div :class="['type_title', {'type_title_select' : hallType == ''}]" @click="selectHallType('')">
								全部信息
								<div v-if="hallType == ''" class="type_line"></div>
							</div>
							<div :class="['type_title', {'type_title_select' : hallType == '1'}]" @click="selectHallType('1')">
								供应信息
								<div v-if="hallType == '1'" class="type_line"></div>
							</div>
							<div :class="['type_title', {'type_title_select' : hallType == '2'}]" @click="selectHallType('2')">
								采购信息
								<div v-if="hallType == '2'" class="type_line"></div>
							</div>
						</div>
            <div class="search_bg">
              <el-input v-model.trim="listQuery.name$lk" clearable/>
              <el-button type="primary" @click="search()">搜索</el-button>
            </div>
					</div>
					<div class="supply_section">
						<div class="list_title">
							<div class="list_title_item">名称</div>
              <div class="list_title_item">图片</div>
							<div class="list_title_item">报价</div>
							<div class="list_title_item">发布时间</div>
						</div>
						<div class="supply_list_item_section" v-for="(item) in hallList" :key="item.id" @click="handleDetail(item)">
							<div class="supply_list_item">
								<div class="supply_list_item_title">
									<div v-if="item.type == 1" class="supply_type_gy">供</div>
									<div v-if="item.type == 2" class="supply_type_cg">购</div>
									<div class="supply_list_item_detail_bg">
										<div class="supply_list_item_name">{{item.name}}</div>
										<!-- <div class="supply_list_item_content">{{item.content}}</div> -->
									</div>
								</div>
                <div class="supply_list_item_img">
									<img :src="item.image" alt="">
								</div>
								<div class="supply_list_item_price">
									<div>￥{{ item.topPrice }}</div>
								</div>
								<div class="supply_list_item_time">
									<div class="item_time">{{ item.createTime }}</div>
                  <div :class="['see_btn', {'see_btn_gy' : item.type == 1}, {'see_btn_cg' : item.type == 2}]">查看</div>
								</div>
							</div>
						</div>
					</div>
          <Pagination :pageNo.sync="listQuery.pageNo" :pageSize.sync="listQuery.pageSize" :total="total" :autoScroll="false" @change="getMoreData()" />
				</div>
      </div>
    </div>
    <Footer></Footer>
    <el-dialog title="供需详情" :visible.sync="dialogHallVisible" width="800px">
      <div class="list_section" v-for="(item, index) in header" :key="index">
        <div class="list_label_bg">
          <div class="list_label">{{ item.label }}</div>
        </div>
        <div v-if="item.value == 'type' && selectItem.type == 1" class="list_value">供应信息</div>
        <div v-else-if="item.value == 'type' && selectItem.type == 2" class="list_value">采购信息</div>
        <div v-else-if="item.value == 'image'">
          <img v-if="selectItem.image && selectItem.image.length > 0" :src="selectItem.image" width="500" alt="">
        </div>
        <div v-else :class="['list_value', {'price_color' : item.value == 'topPrice'}]">{{ selectItem[item.value] }}</div>
      </div>
      <div class="detail_content" v-html="htmlString"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogHallVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import Pagination from "@/views/front/components/Pagination";
import { pcTradePageByQo } from '@/api/trade'

export default {
  name: 'frontHall',
  props: {},
  components: {
    Footer,
    Header,
    Pagination,
  },
  data() {
    return {
      isGYType: true,
      total: 0,
      hallType: '',
      hallList: [],
      listQuery: {
        name$lk: '',
        status: 2,
        pageNo: 1,
        pageSize: 10
      },
      dialogHallVisible: false,
      header: [
        {label: '供需标题', value: "name"},
        {label: '图片', value: "image"},
        {label: '规格', value: "specs"},
        {label: '价格(元)', value: "topPrice"},
        {label: '联系人', value: "connectName"},
        {label: '联系电话', value: "connectPhone"},
        {label: '供需类别', value: "type"},
      ],
      selectItem: {},
      htmlString: '',
    }
  },
  computed: {},
  watch: {},
  methods: {
    search() {
      this.listQuery.pageNo = 1
      this.getTradeList(this.hallType)
    },
    getTradeList(type) {
      let param;
      if (type == '') {
        param = {name$lk: this.listQuery.name$lk, status: 2, pageNo: 1, pageSize: this.listQuery.pageSize}
      } else {
        param = {name$lk: this.listQuery.name$lk, type: type,status: 2, pageNo: 1, pageSize: this.listQuery.pageSize}
      }
      pcTradePageByQo(param).then(response => {
        this.hallList = response.list || []
        this.total = response.totalCount
      }).catch(error => {
        console.log(error);
        this.listLoading = false
      })
    },
    selectHallType(type) {
      this.hallType = type
      this.listQuery.pageNo = 1
      this.getTradeList(type)
    },
    getMoreData() {
      let param;
      if (this.hallType == '') {
        param = {status: 2, pageNo: this.listQuery.pageNo, pageSize: this.listQuery.pageSize}
      } else {
        param = { type: this.hallType, status: 2, pageNo: this.listQuery.pageNo, pageSize: this.listQuery.pageSize}
      }
      pcTradePageByQo(param).then(response => {
        this.hallList = response.list || []
        this.total = response.totalCount
      }).catch(error => {
        console.log(error);
        this.listLoading = false
      })
    },
    handleDetail(item) {
      this.dialogHallVisible = true
      this.selectItem = item
      this.htmlString = item.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
    },
  },
  created() {
    this.getTradeList('')
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .wrapper {
    position: relative;
    width: 100%;
    display: flex;
		justify-content: center;
    background-color: rgb(243, 245, 249);
  }

  .banner_bg {
    position: absolute;
    top: 0;
		width: 100%;
		height: 373px;
  }

  .section {
    position: relative;
    width: 1300px;
    padding-bottom: 40px;
  }

  .banner_title {
    margin-top: 95px;
    height: 79px;
    color: rgba(255, 255, 255, 1);
    font-size: 60px;
    font-weight: 700;
    line-height: 79px;
  }

  .supply_content {
    margin-top: 26px;
    width: 1300px;
    position: relative;
    background-color: #fff;

    .supply_hall {
      display: flex;
      position: relative;
      width: 100%;
      height: 70px;

      .type_bg {
        display: flex;
        position: relative;
        margin-left: 20px;
        align-items: center;
        height: 100%;

        .type_title {
          margin-left: 30px;
          height: 18px;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
          cursor: pointer;

          &:nth-child(1) {
            margin-left: 0px;
          }

          &:hover {
            color: rgba(14, 131, 192, 1);

            // &:before {
            // 	content: '';
            // 	width: 56px;
            // 	height: 2px;
            // 	background: rgba(14, 131, 192, 1);
            // 	border-radius: 80px;
            // 	position: absolute;
            // 	top: 45px;
            // }
          }

          .type_line {
            margin-top: 2px;
            width: 56px;
            height: 2px;
            background-color: rgba(14, 131, 192, 1);
          }
        }

        .type_title_select {
          color: rgba(14, 131, 192, 1);
        }
      }

      .search_bg {
        display: flex;
        align-items: center;
        position: absolute;
        right: 20px;
        height: 70px;

        .el-button {
          margin-left: 15px;
          width: 70px;
          height: 36px;
        }
      }
    }

    .supply_section {
      position: relative;
      width: 100%;

      .list_title {
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        width: calc(100% - 40px);
        height: 36px;
        background: rgba(244, 247, 250, 1);

        .list_title_item {
          height: 36px;
          flex: 1;
          line-height: 36px;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          font-weight: 400;
          text-align: center;
        }
      }

      .supply_list_item_section {
        width: 100%;
        height: 96px;
        border: 1px solid white;
        box-sizing:border-box;

        &:hover,
        &:focus,
        &:visited {
          // box-shadow: 0 0 5px 1px rgba(252, 38, 38, 1);
          border: 1px solid rgba(252, 38, 38, 1);
          cursor: pointer;
        }

        .supply_list_item {
          margin-left: 20px;
          width: calc(100% - 40px);
          height: 100%;
          display: flex;
          box-sizing:border-box;
          border-top: 1px solid rgba(218, 224, 232, 1);
          .supply_list_item_title {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;

            .supply_type_gy {
              width: 18px;
              height: 18px;
              background: rgba(14, 131, 192, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-size: 12px;
              font-weight: 400;
              line-height: 18px;
              text-align: center;
            }

            .supply_type_cg {
              width: 18px;
              height: 18px;
              background: rgba(43, 164, 74, 1);;
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-size: 12px;
              font-weight: 400;
              line-height: 18px;
              text-align: center;
            }

            .supply_list_item_detail_bg {
              padding-left: 13px;
              width: calc(100% - 18px);

              .supply_list_item_name {
                height: 21px;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
                font-size: 16px;
                font-weight: 400;
                @include ellipsis($line: 1);
              }

              .supply_list_item_content {
                margin-top: 5px;
                width: 100%;
                height: 18px;
                color: rgba(153, 153, 153, 1);
                line-height: 18px;
                font-size: 14px;
                font-weight: 400;
                @include ellipsis($line: 1);
              }
            }
          }

          .supply_list_item_img {
            height: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              height: 100%;
            }
          }

          .supply_list_item_price {
            height: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(252, 38, 38, 1);
            font-size: 14px;
            font-weight: 400;
          }

          .supply_list_item_time {
            position: relative;
            height: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            .item_time {
              color: rgba(102, 102, 102, 1);
              font-size: 14px;
              font-weight: 400;
            }

            .see_btn {
              position: absolute;
              top: 32px;
              right: 0;
              width: 60px;
              height: 30px;
              color: rgba(255, 255, 255, 1);
              font-size: 12px;
              font-weight: 400;
              line-height: 30px;
              text-align: center;
              border-radius: 4px;
              cursor: pointer;
            }

            .see_btn_gy {
              background: rgb(37, 115, 183);
            }

            .see_btn_cg {
              background: rgb(29, 156, 66);
            }
          }
        }
      }
    }
  }

  
  .list_section {
    position: relative;
    display: flex;
    border-top: 1px solid rgba(218, 224, 232, 1);
    border-left: 1px solid rgba(218, 224, 232, 1);
    border-right: 1px solid rgba(218, 224, 232, 1);

    &:nth-child(6) {
      border-bottom: 1px solid rgba(218, 224, 232, 1);
    }

    .list_label_bg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      min-height: 51px;
      background: rgba(244, 247, 250, 1);
      border-right: 1px solid rgba(218, 224, 232, 1);

      .list_label {
        width: 110px;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 51px;
      }
    }

    .list_value {
      padding: 16px 16px 16px 27px;
    }

    .price_color {
      color: red;
    }
  }

  .detail_content {
		margin-top: 10px;
	}
</style>